/*
 * @Description: flex布局样式
 * @Author: chenju
 * @Date: 2020-06-03 15:06:19
 * @LastEditors: chenju
 * @LastEditTime: 2022-05-13 16:34:14
*/ 
.g-flex {
    display: flex;
}
.g-flex--column {
    display: flex;
    flex-direction: column;
}
.g-flex-1 {
    flex: 1;
}
.g-flex-grow-1 {
    flex-grow: 1
}
.g-flex-shrink-0 {
    flex-shrink: 0;
}
.g-flex-wrap {
    flex-wrap: wrap;
}
// 纯主轴样式
$flex-main-axis: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around
);
@each $key, $value in $flex-main-axis {
    .g-flex-main-#{$key} {
        display: flex;
        justify-content: $value
    }
    .g-flex-main-#{$key}--column {
        display: flex;
        flex-direction: column;
        justify-content: $value;
    }
}
// 纯侧轴样式
$flex-side-axis: (
    start: flex-start,
    end: flex-end,
    center: center,
    stretch: stretch
);
@each $key, $value in $flex-main-axis {
    .g-flex-side-#{$key} {
        display: flex;
        align-items: $value
    }
    .g-flex-side-#{$key}--column {
        display: flex;
        flex-direction: column;
        align-items: $value
    }
}
// 主轴侧轴一起的样式
@each $mainKey, $mainValue in $flex-main-axis {
    @each $sideKey, $sideValue in $flex-side-axis {
        .g-flex-#{$mainKey}-#{$sideKey} {
            display: flex;
            justify-content: $mainValue;
            align-items: $sideValue;
        }
        .g-flex-#{$mainKey}-#{$sideKey}--column {
            display: flex;
            flex-direction: column;
            justify-content: $mainValue;
            align-items: $sideValue;
        }
    }
}